<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <el-card class="TopCard">
      <template>
        <!-- 收索功能 -->
        <!-- label-width 设置表单头lable占内表单的大小 -->
        <el-form
          ref="contentForm"
          label-width="90px"
          :model="form"
        >
          <!-- :gutter 是设置表单两边的外边距 -->
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="司机账号:"
                prop="account"
              >
                <el-input
                  v-model="form.account"
                  placeholder="请输入司机账号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机姓名:"
                prop="name"
              >
                <el-input
                  v-model="form.name"
                  placeholder="请输入司机姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机手机号:"
                prop="phone"
              >
                <el-input
                  v-model="form.phone"
                  placeholder="请输入司机手机号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item label="所属机构:">
                <el-select
                  v-model="form.agentId"
                  placeholder="请选择所属机构"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.userId"
                    :label="item"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="danger"
                @click="resetForm"
              >搜索</el-button>
              <el-button @click="editForm">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </el-card>
    <el-card
      v-loading="loading"
      class="box-card"
    >
      <template>
        <!-- 列表渲染功能 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
        >
          <el-table-column
            label="序号"
            width="80"
            type="index"
            :index="subscriptList"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="司机账号"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="司机姓名"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="司机电话"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="truck.licensePlate"
            label="关于车辆"
            width="220"
          >
          </el-table-column>
          <el-table-column
            prop="agency.name"
            label="所属机构"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="工作状态"
            width="100"
          >
            <template #default="{ row }">
              <i
                class="el-icon-star-off IDriver"
                :class="{ RedDriver: row.workStatus }"
              ></i>
              <span v-html="row.workStatus == 0 ? '休息' : '上班'"></span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
          >
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="ViewDriver(row.userId)"
              >
                查看
              </el-button>
              <el-button
                type="text"
                @click="open(row)"
              >配置车辆</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器功能 -->
        <div style="height: 70px; margin-top: 10px; margin-left: 300px">
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </el-card>
    <!-- 车辆管理详情 -->
    <el-dialog
      title=" 配置车辆"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        label-width="80px"
      >
        <el-card class="CardvehicleRow">
          <el-row
            :gutter="20"
            class="vehicleRow"
          >
            <el-col :span="4">司机编号:</el-col>
            <el-col :span="8">{{ RowList.userId }}</el-col>
            <el-col :span="4">司机名称:</el-col>
            <el-col :span="5">{{ RowList.name }}</el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="vehicleRow"
          >
            <el-col :span="4">司机电话:</el-col>
            <el-col :span="8">{{ RowList.mobile }}</el-col>
            <el-col :span="4">所属机构:</el-col>
            <el-col :span="5">{{ RowList.agency.name }}</el-col>
          </el-row>
        </el-card>
        <el-form-item
          label="配置车辆"
          class="ItemvehicleRow"
        >
          <el-select
            v-model="sizeForm"
            @change="truckType"
          >
            <el-option
              v-for="item in getTruck"
              :key="item.id"
              :label="item.licensePlate"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!--  -->
        <el-table
          :data="tableDataList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="licensePlate"
            label="车牌号"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="车辆状态"
            width="250"
          >
            <template #default="{row}">
              <i
                class="el-icon-star-off IDriver"
                :class="{ RedDriver: row.workStatus }"
              ></i>
              {{ row.workStatus === 0? '禁用':'启用' }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="190"
          >
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
                @click="editVehicle(row.truckLicenseId)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
                @click="DelVehicle"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--  -->
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { FetchDriverAPI } from '@/api/driver'
import { getTruckListInDriver } from '@/api/transit'
export default {
  name: 'Courses',
  data() {
    return {
      loading: false,
      tableData: [],
      page: 1,
      pageSize: 10,
      counts: 0,
      form: {
        account: '',
        name: '',
        phone: '',
        agentId: ''
      },
      list: [],
      //
      dialogFormVisible: false,
      RowList: {
        userId: '',
        name: '',
        mobile: '',
        agency: { name: '' }

      },
      sizeForm: [],
      // 车牌号
      getTruck: [],
      //
      tableDataList: []
    }
  },
  created() {
    this.FetchDriver()
    this.getTruckList()
  },
  mounted() {
    this.PickedForm()
  },
  methods: {
    // 查看详情
    editVehicle(id) {
      console.log(id)
      this.$router.push(`/transit/vehicle-detail?id=${id}`)
    },
    // 删除车辆详情
    DelVehicle() {
      this.tableDataList = []
      this.sizeForm = ''
    },
    // 获取车辆详细信息
    async truckType() {
      // console.log(this.sizeForm)
      this.tableDataList = [{ ...this.sizeForm }]
      console.log(this.tableDataList)
    },
    // 获取车辆信息
    async getTruckList() {
      const { data } = await getTruckListInDriver()
      // console.log(data)
      this.getTruck = data
      // console.log(this.getTruck)
    },
    // 初始化列表渲染
    async FetchDriver() {
      this.loading = true
      const { data } = await FetchDriverAPI({
        ...this.form,
        page: this.page,
        pageSize: this.pageSize
      })
      this.counts = data.counts
      this.tableData = data.items
      this.loading = false
    },
    // 控制，每页条数
    handleSizeChange(val) {
      this.pageSize = val
      this.FetchDriver()
    },
    // 控制页数
    handleCurrentChange(val) {
      this.page = val
      this.FetchDriver()
    },
    // 序号展示
    subscriptList(index) {
      return (this.page - 1) * this.pageSize + index + 1
    },
    // 查看功能
    ViewDriver(id) {
      this.$router.push(`/transit/driver-detail?id=${id}`)
      // console.log(id)
    },
    /**
     * 搜索功能
     */
    // 表单重置
    editForm() {
      // this.$refs.contentForm.resetField()
      // console.log(this.form)
      this.form = {
        account: '',
        name: '',
        phone: '',
        agentId: ''
      }
      this.FetchDriver()
    },
    // 搜索功能
    resetForm() {
      this.FetchDriver()
    },
    // 下拉选项
    async PickedForm() {
      const {
        data: { items }
      } = await FetchDriverAPI({ page: 1, pageSize: 99999 })
      // console.log(items)
      items.map((item) => {
        this.list.push(item.agency.name)
      })
      const iii = new Set(this.list)
      this.list = iii
      console.log(this.list)
    },
    // 车辆配置
    open(row) {
      this.$confirm(
        <div>
          <el-row>
            <el-col>配置车辆需要满足以下条件</el-col>
          </el-row>
          <el-row>
            <el-col>1：司机信息已完善</el-col>
            <el-col>2：司机已设置排班</el-col>
          </el-row>
          <el-row>
            <el-col>3：司机绑定车辆未在启用状态</el-col>
          </el-row>
        </div>,
        '车辆配置',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.RowList = row
          this.sizeForm = row
          // console.log(this.RowList)
          this.dialogFormVisible = true
          this.$message({
            type: 'success',
            message: '进入成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
  margin: 0 15px;
}
.box-card {
  width: 100%;
  height: 100%;
}
.TopCard {
  margin-bottom: 20px;
}
//上班状态图标显示
.IDriver {
  color: beige;
  background-color: rgb(230, 39, 39);
}
.RedDriver {
  color: bisque;
  background-color: rgb(16, 224, 89) !important;
}
.vehicleRow {
  margin: 10px;
}
.CardvehicleRow {
  // margin: 20px 20px;
}
.ItemvehicleRow {
  margin: 20px 420px 20px 20px;
}
</style>

